<template>
  <div class="housedetail">
    <van-nav-bar :title="houseInfo.community"
                 left-arrow
                 style="background:#f6f5f6;"
                 fixed
                 @click-left='$router.back()' />
    <div>
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in houseInfo.houseImg"
                        :key="index">
          <van-image height="215"
                     width="100%"
                     :src="`http://122.51.249.55:8080${image}`"
                     @click="previewImage(index)" />
        </van-swipe-item>
      </van-swipe>
      <!-- 基础信息 -->
      <div class="info">
        <div class="title">{{houseInfo.title}}</div>
        <van-tag :color="index%2===0?'#e1f5f8':'#e1f5ed'"
                 :text-color="index%2===0?'#39becd':'#3fc28c'"
                 v-for="(tag,index) in houseInfo.tags"
                 :key="index">{{tag}}</van-tag>
        <ul class="detail">
          <li>
            <span class="data"><strong>{{houseInfo.price}}</strong>元/月</span>
            <span>租金</span>
          </li>
          <li>
            <span class="data"><strong>{{houseInfo.roomType}}</strong></span>
            <span>房型</span>
          </li>
          <li>
            <span class="data"><strong>{{houseInfo.size}}</strong>平米</span>
            <span>面积</span>
          </li>
        </ul>
        <ul class="desc">
          <li>
            <p><span>装修:</span>精装</p>
            <p><span>楼层:</span>{{houseInfo.floor}}</p>
          </li>
          <li>
            <p><span>朝向:</span>{{houseInfo.oriented?houseInfo.oriented[0]:''}}</p>
            <p><span>类型:</span>普通住宅</p>
          </li>
        </ul>
      </div>
      <div class="split"></div>
      <!-- 房屋配套 -->
      <div class="position">
        <p><span>小区:</span>{{houseInfo.community}}</p>
        <!-- 地图容器 -->
        <div class="map"
             ref="map">
        </div>
        <button class="btn" :class="{btnColor : style === '默认' }"  @click="none">默认</button>
        <button class="btn" :class="{btnColor : style === '公交' }"  @click="bus">公交</button>
        <button class="btn" :class="{btnColor : style === '学校' }"  @click="shool">学校</button>
        <button class="btn" :class="{btnColor : style === '地铁' }"  @click="train">地铁</button>
        <!-- <div>
            <label>关键词：<input v-model="keyword"></label>
            <label>地区：<input v-model="location"></label>
            <baidu-map>
              <bm-view class="map"></bm-view>
              <bm-local-search :keyword="keyword"
                               :auto-viewport="true"
                               :location="location"></bm-local-search>
            </baidu-map>
          </div> -->
        <div class="box">
          <h5>房屋配套</h5>
          <hr>
          <van-grid :column-num="5"
                    square
                    :border='false'
                    v-if="isHasSupporting">
            <van-grid-item v-for="item in houseInfo.supporting"
                           :key="item"
                           :text="item">
              <i slot="icon"
                 class="iconfont"
                 :class="supportingIcon[item]"></i>
            </van-grid-item>
          </van-grid>
          <p v-else>暂无数据</p>
        </div>
      </div>
      <div class="split"></div>
      <!-- 房屋概况 -->
      <div class="survey">
        <div class="box">
          <h5>房屋概况</h5>
          <hr>
          <div class="user">
            <div class="avatar"><img src="http://122.51.249.55:8080/img/avatar.png"
                   alt="头像"></div>
            <div class="userinfo">
              <p>王女士</p>
              <p class="auth"><i class="iconfont icon-auth"></i>已认证房主</p>
            </div>
            <van-button plain
                        type="primary"
                        size="small">发消息</van-button>
          </div>
          <p class="description">{{houseInfo.description||'暂无房屋概述'}}</p>
        </div>
      </div>
      <div class="split"></div>
      <!-- 猜你喜欢 -->
      <div class="like">
          <div class="box">
            <h5>猜你喜欢</h5> 
          <hr>  
        </div>
        <!-- 没有接口,假数据 -->
        <div class="news">
                <van-list>
                    <van-row style="border-bottom: 1px solid #ccc; padding-bottom: 15px">
                        <van-col span="10"
                       style="padding: 0 15px">
                <van-image width="100%"
                           height="100%"
                            src="http://122.51.249.55:8080/img/message/1.png" />
              </van-col>
              <van-col span="14"
                        >
                <p>安贞西里 三室一厅 </p>
                            <span style="color: #84dbf8;">近地铁</span>
                            <div  style="color: #fa5741;">4500<span style="color: #fa5741;">元/月</span></div>
              </van-col>
            </van-row>
                    <van-row style="border-bottom: 1px solid #ccc; padding-bottom: 15px">
                        <van-col span="10"
                       style="padding: 0 15px">
                           
                <van-image  
                            width="100%"
                            height="100%"
                            src="http://122.51.249.55:8080/img/message/2.png" />
                         
              </van-col>
                        <van-col span="14"
                        >
                <p>天居园 2室1厅</p>
                            <span style="color: #84dbf8;">精装修</span>
                            <div  style="color: #fa5741;">7200<span style="color: #fa5741;">元/月</span></div>
                         
              </van-col>
                      </van-row>
                    <van-row style="border-bottom: 1px solid #ccc; padding-bottom: 15px">
                        <van-col span="10"
                       style="padding: 0 15px">
                           
                <van-image  
                            width="100%"
                            height="100%"
                            src="http://122.51.249.55:8080/img/message/3.png" />
                         
              </van-col>
                        <van-col span="14"
                        >
                <p>角门甲4号院 1院1厅</p>
                            <span style="color: #84dbf8;">随时看房</span>
                           <div  style="color: #fa5741;">4300<span style="color: #fa5741;">元/月</span></div>
                         
              </van-col>
                      </van-row>
                  </van-list>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="footer">
        <van-button style="color:#999;"
                    :icon="isCollection?'star':'star-o'"
                    :class="{active:isCollection}"
                    :loading="isbtnLoading"
                    @click="btnCollection">{{isCollection?'已收藏':'收藏'}}</van-button>
        <van-button style="color:#999;">在线咨询</van-button>
        <!-- <a href="tel:+120"><van-button type="primary">电话预约</van-button></a> -->
        <a href="tel:+120"
           class="van-button van-button--primary van-button--normal">电话预约</a>
      </div>
    </div>
  </div>
</template>

<script>
import { getHousesInfo } from '@/api/house'
import { isUserFavorites,addUserFavorites,delUserFavorites } from '@/api/user'
import { ImagePreview } from "vant";
import { getToken } from '@/utils/auth'
export default {
  name:'Detail',
  props: {
    houseCode: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      houseInfo: {},
      // 定义图标枚举
      supportingIcon : {
        '衣柜': 'icon-wardrobe',
        '洗衣机': 'icon-wash',
        '空调': 'icon-air',
        '天然气': 'icon-gas',
        '冰箱': 'icon-ref',
        '暖气': 'icon-Heat',
        '电视': 'icon-vid',
        '热水器': 'icon-heater',
        '宽带': 'icon-broadband',
        '沙发':'icon-sofa ',
      },
      isCollection:false,
      isbtnLoading:false,
      location: '',
      keyword: '',
      style:'默认',
      large:18
    }
  },
  created () {
    this.$toast.loading({
duration: 0, // 持续展示 toast
// forbidClick: true,
message: "加载中..."
});
  },
  mounted () {
    this.getHousesInfo()
  },
  methods: {
    none(){
      this.keyword = ''
      this.drawMap()    
      this.style = '默认'   

    },
    bus(){
      this.keyword = '公交'
      this.style = '公交'   
      this.drawMap()    

    },
    shool(){
      this.keyword = '学校'
      this.style = '学校'   

      this.drawMap()    
    },
    train(){
      this.keyword = '地铁'
      this.style = '地铁'   

      //  const mp = new BMap.Map(this.$refs.map,{
      //   enableBizAuthLogo: false
      // })
      // const point = new BMap.Point(this.houseInfo.coord.longitude, this.houseInfo.coord.latitude);

      // mp.centerAndZoom(point, 12)
      this.drawMap()    

    },
    async getHousesInfo () {
      const { body } = await getHousesInfo(this.houseCode)
      this.houseInfo = body
      if(JSON.parse(getToken())){
        const { body:{isFavorite} }=await isUserFavorites(this.houseCode)
        this.isCollection=isFavorite
      }
      this.$toast.clear()
      // 绘制地图
      this.drawMap()
    },
    // 绘制地图
    drawMap(){
      // 创建地图实例
      const mp = new BMap.Map(this.$refs.map,{
        enableBizAuthLogo: false
      })
      // 设置中心点坐标
      const point = new BMap.Point(this.houseInfo.coord.longitude, this.houseInfo.coord.latitude);
      mp.centerAndZoom(point, this.large)
      // 复杂的自定义覆盖物
    function ComplexCustomOverlay(point, text){
      this._point = point;
      this._text = text;
    }
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    // 自定义遮盖物标记
    ComplexCustomOverlay.prototype.initialize = function(map){
      this._map = map;
      var div = this._div = document.createElement("div");
      div.style.position = "absolute";
      div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
      div.style.backgroundColor = "#EE5D5B";
      div.style.border = "1px solid #BC3B3A";
      div.style.color = "white";
      div.style.height = "18px";
      div.style.padding = "2px";
      div.style.lineHeight = "18px";
      div.style.whiteSpace = "nowrap";
      div.style.MozUserSelect = "none";
      div.style.fontSize = "12px"
      var span = this._span = document.createElement("span");
      div.appendChild(span);
      span.appendChild(document.createTextNode(this._text));      
      var that = this;

      var arrow = this._arrow = document.createElement("div");
      arrow.style.background = "url(//map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
      arrow.style.position = "absolute";
      arrow.style.width = "11px";
      arrow.style.height = "10px";
      arrow.style.top = "22px";
      arrow.style.left = "10px";
      arrow.style.overflow = "hidden";
      div.appendChild(arrow);
      mp.getPanes().labelPane.appendChild(div);
      return div;
    }
    // 绘制图案,消息框
    ComplexCustomOverlay.prototype.draw = function(){
      var map = this._map;
      var pixel = map.pointToOverlayPixel(this._point);
      this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
      this._div.style.top  = pixel.y - 30 + "px";
    }
    var myCompOverlay = new ComplexCustomOverlay(point, this.houseInfo.community)
    mp.addOverlay(myCompOverlay);
    // 关键词检索
    var local = new BMap.LocalSearch(mp, {
		renderOptions:{map: mp,panel:'none'}
	  });
  local.search(this.keyword);
 


    },
    // 收藏点击事件
    async btnCollection(){
      // 先判断用户有没有登录
      if(!JSON.parse(getToken())){
        try{
          await this.$dialog.confirm({
            title: '提示',
            message: '登录后才能收藏房源,是否去登录?',
            confirmButtonText:'去登录',
            confirmButtonColor:'#108ee9',
            width:230
          })
          this.$router.push('/login')
        }catch(err){
          console.log(err);
        }
      }else{
        this.isbtnLoading=true
        // 判断是否收藏
        if(this.isCollection){
          // 如果收藏了,取消收藏
          await delUserFavorites(this.houseCode)
        }else{
          // 没有收藏,添加收藏
          await addUserFavorites(this.houseCode)
        }
        this.isCollection=!this.isCollection
        this.isbtnLoading=false
        this.$toast.success('操作成功')
      }
    },
    // 点击图片有预览效果
    previewImage(index) {
      const img = this.houseInfo.houseImg;
      const images = img.map((item) => {
       return "http://122.51.249.55:8080" + item;
      });
      // console.log(images);
      ImagePreview({
        images,
        startPosition:index,
      });
    },
  },
  computed: {
    // 判断是否有房屋配套
    isHasSupporting() {
      return this.houseInfo.supporting?this.houseInfo.supporting.length>0:false
    }
  },
}
</script>

<style lang="less" scoped>
.housedetail{
  padding-top: 92px;
  padding-bottom: 84px;
  .box{
    padding: 20px;
    h5{
      font-size: 30px;
      line-height: 60px;
      margin: 0;
    }
    hr{
      background-color: #cecece;
      height: 1px;
      border: none;
    }
    .iconfont{
      font-size: 40px;
    }
    .user{
      display: flex;
      justify-content:space-around;
      align-items: center;
      margin-bottom: 30px;
      .avatar{
        width: 90px;
        height: 90px;
        margin-right: 20px;
        img{
          width: 100%;
        }
      }
      .userinfo{
        display: flex;
        flex: 1;
        flex-direction: column;
        p{
          flex: 1;
          font-size: 30px;
          margin: 0;
          &.auth{
            color: #fa5741;
            .iconfont{
              font-size: 28px;
              margin-right: 5px;
            }
          }
        }
      }
    }
    .description{
      font-size: 12px;
    }
  }
  .info{
    padding: 20px;
    margin-bottom: 10px;
    .title{
      padding: 10px;
      font-size: 30px;
    }
    .van-tag{
      margin: 0 10px;
    }
    .detail{
      border-top:1px solid #cecece;
      border-bottom:1px solid #cecece;
      height: 200px;
      margin: 20px 0;
      display: flex;
      align-items: center;
      li{
        height: 90px;
        font-size: 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        span{
          flex: 1;
          color: #999;
          &.data{
            color: red;
            strong{
              font-weight: 900;
            }
          }
        }
      }
    }
    .desc{
      height: 100px;
      display: flex;
      align-items: center;
      li{
        font-size: 13px;
        flex: 1;
        display: flex;
        flex-direction: column;
        p{
          flex: 1;
          line-height: 20px;
          padding-left: 20px;
          span{
            color: #999;
          }
        }
      }
    }
  }
  .split{
    height: 20px;
    background-color: #f6f5f6;
  }
  .position{
    p{
      font-size: 13px;
      line-height: 80px;
      padding: 0 30px;
      span{
        color: #666666;
      }
    }
    .map{
      height: 300px;
      background-color: #ccc;
    }
    .btn{
      font-size: 30px;
      margin: 5px 10px;
      border-radius: 20px;
      background-color: #999;
      border-color: #fff;
      color: #eee;
    }
    .btnColor{
      background-color: #07c160;

    }
  }
}
*/deep/.BMap_pop{
  display: none;
  
}
*/deep/.BMap_shadow{
display: none
}
.news {
    padding: 0 60px 0px 20px;
    margin-bottom: 20px;
    background-color: #fff;
    p {
      padding: 0;
      margin: 0;
      line-height: 50px;
      font-size: 30px;
      color: #333;
    }
    span {
      font-size: 24px;
      color: #9c9fa1;
    }
  }
  .footer{
    position: fixed;
    width: 100%;
    background-color: #fff;
    display: flex;
    bottom: 0;
    a{
      line-height: 80px;
    }
    .van-button{
      flex: 1;
      &.active{
        .van-icon{
          color: #ff4f00;
        }
      }
      .van-icon{
        margin-bottom: 10px;
      }
    }
    
  }
</style>
